SLIDES FOR 
THEORY LECTURES 


(DON T SKIP THEM. THEY ARE SUPER 
IMPORTANT €) 


@JONASSCHMED [MAN 


TABLE OF CONTENTS: THEORY LECTURES (CLICK THE TITLES) 


© Watch before you start! Summary: Which Data Structure to Use? © How the Web Works: Requests and Responses 


First-Class and Higher-Order Functions 


© A Brief Introduction to JavaScript B Promises and the Fetch API 


Data Types Closures 39 Asynchronous Behind the Scenes: The Event Loop 


Boolean Logic Data Transformations: map, filter, reduce 40 An Overview of Modern JavaScript Development 


JavaScript Releases: ES5, ES6+ and ESNext Summary: Which Array Method to Use? © An Overview of Modules in JavaScript 


Functions Calling Other Functions How the DOM Really Works 42 Modern, Clean and Declarative JavaScript Programming 


Reviewing Functions Event Propagation: Bubbling and Capturing 43 Forkify: Project Overview and Planning 


Learning How to Code Efficient Script Loading: defer and async 44 The MVC Architecture 


How to Think Like a Developer What is Object-Oriented Programming? 45 Event Handlers in MVC: Publisher-Subscriber Pattern 


Debugging (Fixing Errors) OOP in JavaScript 46. Forkify Project: Final Considerations 


What's the DOM and DOM Manipulation Prototypal Inheritance and The Prototype Chain 
An high-level Overview of JavaScript Object.create 
The JavaScript Engine and Runtime Inheritance Between "Classes": Constructor Functions 
Execution Contexts and The Call Stack Inheritance Between "Classes": Object.create 


Scope and The Scope Chain ES6 Classes summary 


Variable environment: Hoisting and The TDZ Mapty Project: How to Plan a Web Project 


© The this Keyword Mapty Project: Final Considerations 


Ge Primitives vs. Objects (Primitive vs. Reference Types) Asynchronous JavaScript, AJAX and APIs 


WELCOME, WELCOME, 
WELCOME! 
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LEG TURE 
WATCH BEFORE YUU STARTI 


SOME QUICK CONSIDERATIONS BEFORE WE START... 44 


a This course Is for all of you! So please don't write a bad review right away If the course is too easy, or too hard, or 
progressing too slow, or too fast for you. To make it perfect for YOU, you can rewatch lectures, jump to other sections, 


watch the course with slower or faster playback speed, or ask questions. 


Awful, not what | expected at all 


* 


Too easy! Only for beginners! 68 


> S 1.5: C o0:00/1:05 
Please don't be that person. t 


Everyone is different... 
(Unless the course itself is truly terrible) 


SOME QUICK CONSIDERATIONS BEFORE WE START... 47 


pa You need to code along with me! You will learn ZERO JavaScript skills by just sitting and watching me code. You have to 
code YOURSELF! 


SOME QUICK CONSIDERATIONS BEFORE WE START... 44 


go Try all the coding challenges! Try to do your best, but If you get stuck for too long, watch the solution. Don't beat yourself 
up if you can't figure it out! Just rewatch the lectures that were covered in the challenge, try to understand them better, 


and move on. 


4 Watch for this sign! 


PAUSE THE VIDEO 
FOR CHALLENGE 


A me. a nd Pod 
age but owy b ndine formally, WET 
il doeh we b le He gut. We uad d hea 


O glu lal plo, HL Aa « lob 
> Ger au teo e Ar (ek; Ike He pra Py 


Nike owe wat Thnk of Sek a a pów. | | 
ne vals od oe nf Wie fle pom wald yon 


DR 
density m | 


PZA wald 


Eou a Gol Hoy fanh mehr, jacked A M 
kin 
b 


> fingit 4 ber, pl, lek YW ten, weiche, 3 


Quduck deren, Prckeaging „SEEN i, Clarity 


A Lanas e GR dC tae od Ca hve , A 
note uk inlehled Kal go JOE 


RR: 
ve b Lim whe Hey fød bee 


ELA 


— Saver qe if who kl 
bw MACA ER 

+ Mody le las : 

— AE | Lug i : 


- 


5 JB 


AN ok ote Hay wal p Lee Men 4 
We Akio) | NAJ 


(See — Poel + peace of wal q 
vd; 8 D E a 

z Ye Alemania 
Shele may imped a 2 å 
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del a 


a ed OG are Ażffmmh werke porban 


de ule yn Lula . Libe aL muestras 


bd: Mode beak Ind, 
OS : 
— gene ‚ch, 
Uu y wh (wod Such es (erb 
- Tegel «mek sub of ¿Aras 
m Gaj e vs, uk adj | 


$) low lale 


If you want the course material to stick, take notes. Notes on code syntax, notes on theory concepts, notes on everything! 


Totally non-coding... Try to 
understand a single word & 


SOME QUICK CONSIDERATIONS BEFORE WE START... 7 


Q If this Is your first time ever programming, please don't get overwhelmed. It's 100% normal that you will not understand 


everything at the beginning. Just don't think “I guess coding is not for me”! 


YOU CAN DO IT * 


h 


WE KNOW You CAN 


Y 


SOME QUICK CONSIDERATIONS BEFORE WE START... 


T In the first sections of the course, don't bother understanding WHY things work the way they do in JavaScript. Also, don't 
stress about efficient code, or fast code, or clean code. While learning, we just want to make things WORK. We will 


understand the WHY later in the course. 


MY CODEDOESNTWOBK 


y 
ZA 


MY CODEWORKS 


+! 


I HAVE NC IDEA WHY 


3 


| HAVE NO: ¡DER WHY 


SOME QUICK CONSIDERATIONS BEFORE WE START... ¿7 


FAI 


Before moving on from a section, make sure that you understand exactly what was covered. Take a break, review the code 


we wrote, review your notes, review the projects we built, and maybe even write some code yourself. 


| Again! | (Between 1 and 20) 


Å) Coe pi ae Sl 3 SH 


C) Gard genial by 4 Pr E 
mu wd brand (erowid 4 Ale vega: Wd yw ent yw dre k Å AA 
JU ade fol Søke adi 4 Zur ee ct 3 Å document.querySelector('.check').addEventListener('click Guess Fi Humbe r F 
y y ULA cbeul ved. Val fun = 
2 N bed erh b adime pan dy Sub 3 all mess, flog, vite idea, const guess Number (document.querySelector('.guess').value) 4 
E daek hee, bo e He pet e el o CA Saal pih “ede, fk ande O 
a Rove LY Vk plug Hu po I Hop e lej > Gores dts uko Seed i, bebek, Comms t erent > Clquess) £ 
3 (eb an ment hy leds lle He pray Y velas, Alfamkodr , ek. a å B= | g 
keg or er of ferd 4 a RZE í > Vaca Wee yoe Akon Ly merket pora, | } ee tj A ej rer 
a me wads Of Wie He per wall yae le ym? bolt . Lie fal um | 
4 enden la let Neus R document .querySelector(' .number').textContent number 
a 5 
Ez CE document. querySelector('.message') .textContent b- Correct number! 
| 1 7 Ślecye. aj y 
Y — Fraghedly , ciu, 
¡A 4 Gag midi ód Ve Are 
27 gml Ho mh meh, led A - Tek amok mb coff, da ey 5 
en ov hal T md He UA en e vg, vok Lien Ba” i (score > highscore) { 
bem wald Veg bo que | 6 highscore = score 
agas A lay nal mbeku Yu ton, ue | $) toy delia > document. querySelector('.highscore').textContent = highscore 
ee Br: ER a, Cavity, 3 = lege dow went 4 suhbweche | Hoy we b be. } 
thas 4 CM los oud. fala y un jour ne 
slet RG olle] © o a å Å E a PRE Ve Story, ek cual Er } (guess > number) 4 5 Correct number? 
AA ee wl Her fed Wen 6 øde gf koken (oo pa OE veke = document. querySelector('.message') .textContent Mi Too high! 
ON Gulyjwu 7 wj p fl Her 4 See als Jk we tall Lt b que „3 
= Eee f ww kle Me here i i © Adine's sem (Ale mb be AL å Shey thd show) score score Sco re: 135 
SBE PaK Hara los "AE 4 Gaby world 5) Chellorge h Solve pwblum document. querySelector('.score').textContent = score 
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score score 


document. querySelector('. score 


SOME QUICK CONSIDERATIONS BEFORE WE START... 47 


17 If you have an error or a question, start by trying to solve it yourself! This ıs essential for your progress. If you can't solve 


it, check the Q&A section. If that doesn't help, just ask a new question. Use a short description, and post relevant code. 


Q Overview Q&A Bookmark Announcemen t 
ZĘ 
2 > Search all course questions 
All lectures v Sort by most recen t v Filter questions 


9) 17788 questions in this course Ask a new question Aa 3 


SOME QUICK CONSIDERATIONS BEFORE WE START... +7 


" I recorded this course on a Mac, but everything works the exact same way on Windows or Linux. If something doesnt 


work on your computer, it's NOT because you're using a different OS. 


Mac 


få _L_ 


SOME QUICK CONSIDERATIONS BEFORE WE START... ¿7 


us Most importantly, have fun! It's so rewarding to see something that YOU have built YOURSELF! So if you're feeling 


frustrated, stop whatever you're doing, and come back later! 


_ And I mean REAL fun & 
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JAVASCRIPT FUNDAMENTALS = FART | 


LECTURE 


A BRIEF INTRODUCTION 10 
JAVASCRIP | 


WHAT IS JAVASCRIPT? 


We don't have to worry about complex 
stuff like memory management 


JAN ASCAIPT 


AS > A HIGH-LEVEL, We can use different styles 
of programmin 
ndadah e | OBJECT-ORIENTED, MULTI-PARADIGM SE 
PROGRAMMING LANGUAGE. & 


NG Instruct computer to do things 


The ROLE OF JAVASCRIPT IN WEB DEVELOPMENT 


CONTENT NOUNS 


<p></p> 


means "paragraph" 


VERBS 
7 
p.hide(); 
J S means “hide the 
paragraph" 
PRESENTATION PROGRAMMING LANGUAGE: 


BUILDING WEB APPLICATIONS 


EXAMPLE OF DYNAMIC EFFECTS / WEB APPLICATION 


y fae A Q Search Twitter 
1,317 Tweets 
@ Home Node.js, Expr == TITT 
CODING COURSES _ JONASIO ECT ER Complete Bot ESEE __—. 
DONE RIGHT. = MongoDB & More: = R ; 
H Explore SUBMITTED FOR ——— Display user info on 


(© Notifications hover 
Y 


Show spinner + loading 
data in the background 


Messages 


Edit profile 


Show spinner + loading 
data in the background 


Bookmarks 


Jonas Schmedtmann 


@jonasschmedtman 


[=] Lists loper. Designer. Online teacher. 
© Algarvewartugal «$? jonas.io Joined May 2010 
® Profile 37 Following 19.4%E£ollowers 
More Tweets Tweats & replies Media Likes J 
Show data after loading 


) E 
Show tweet box D 


after clicking Terms Privacy policy Cookies info More vw 


© 2019 Twitter, Inc. 


Display tweets after 
loading data 


THERE IS NOTHING YOU CAN T DO WITH JAVASCRIPT (WELL, ALMOST...) 


"ią Front-end apps a Back-end apps 
Dynamic effects and 


OB web applications in the SUCH een ee ene o 


f web servers 
browser y 
THIS COURSE 


nede 
~is POV JS 8 
s” 100% based on JavaScript. They might 


go away, but JavaScript won't! 


Native mobile Native desktop 
applications applications 


Js © Gen JS © 


JAVASCRIPT RELEASES... (MORE ABOUT THIS LATER) 


Biggest update to the New updates to JS 


ma language EVER every single year 


Modern JavaScript 


ECMAScript 


4% Learn modern JavaScript from the beginning, but without forgetting the older parts! 


ES Let's finally get started! 
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LECTURE 
DATA TYPES 


OBJECTS AND PRIMITIVES 


VALUE 


/ Ye ELSE 


firstName 


age = 30 


The 7 PRIMITIVE DATA TYPES 


1. Number. Floating point numbers « Used for decimals and Integers Let age = 23; 


2. String: Sequence of characters & Used for text 


3. Boolean: Logical type that can only be true or false & Used for taking decisions 


4. Undefined: Value taken by a variable that is not yet defined (empty value’) 


5. Null: Also means ‘empty value’ 
6. Symbol (ES2015): Value that is unique and cannot be changed [Not useful for now] 


7. Biglnt (ES2020): Larger integers than the Number type can hold 


& JavaScript has dynamic typing: We do not have to manually define the data type of 
the value stored in a variable. Instead, data types are determined automatically. 


Value has type, NOT variable! 
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LECTURE 
BUULEAN LOGIG 


BASIC BOOLEAN LOGIC: THE AND, OR & NOT OPERATORS 


A AND B 


“Sarah has a drivers license 
AND good vision” 


Å 
mo TRUE | FALSE 
TRUE | TRUE [FALSE 
FALSE FALSE | FALSE 


true when ALL are true 


A OR B 


“Sarah has a drivers license 
OR good vision” 


A 
EJ TRUE | FALSE 


Possible values 


operation, 
depending on 
2 variables 


FALSE TRUE |FALSE 


true when ONE is true 


o No matter how many variables — 


NOT A. NOT B 


ą 


Inverts true/false value 


< EXAMPLE: 


he SAGI NAS å Gr vers Icenee 


B: Sarah has good vision 


Boolean variables that can 


be either TRUE or FALSE 


AN EXAMPLE & 


BOOLEAN VARIABLES age = 16 
& A: Age Is greater or equal 20 false ao uj iż 
PE | 
B: Age Is less than 30 true TRUE | TRUE | FALSE 
(AS 
LET'S USE OPERATORS! FALSE | FALSE | FALSE 


+ lA true 


false 
< A AND B false 
false rue 
k TRUE | FALSE 
© A OR B true 
false true 
= IA AND B me TRUE | TRUE | TRUE 
true true 
© A OR IB false FALSE | TRUE | FALSE 
false false 
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LECTURE 


JAVASCRIPT RELEASES: ESO, ESD+ 
ANU ESNEX T 


A BRIEF HISTORY OF JAVASCRIPT 


1995 


1996 


1997 


2009 


2015 


2016 — o 


Brendan Eich creates the very first version of JavaScript in just 10 days. It was called 
Mocha, but already had many fundamental features of modern JavaScript! 


Mocha changes to LiveScript and then to JavaScript, in order to attract Java developers. 
However, JavaScript has almost nothing to do with Java « 


Microsoft launches IE, copying JavaScript from Netscape and calling it JScript; nun ir Explorer = R 


U m => == pe 
> AT A a PEFPHF r 37 


With a need to standardize the language, ECMA releases ECMAScript 1 (EST), the first official a ecma 
standard for JavaScript (ECMAScript is the standard, JavaScript the language in practice); | 


ES5 (ECMAScript 5) is released with lots of great new features; 
ES6/ES2015 (ECMAScript 2015) was released: the biggest update to the language ever! 
ECMAScript changes to an annual release cycle in order to ship less features per update Å, 


Release of ES2016 / ES2017 / ES2018 / ES2019 / ES2020 / ES2021 / ... / ES2089 Y 


BACKWARDS COMPATIBILITY: DON T BREAK THE WEB! 


| 


„E 
add ( > ary Modern JavaScript 
» : Engine 
BACKWARDS 
1997 COMPATIBLE 2020 


& Old features are never removed; 


DON I BREAK THE WEBI > AB really new versions, just 
incremental updates (releases) 


< Websites keep working forever! 


a 


Modern JavaScript 


Engine c int add n 


2089 


2020 


HOW TO Use MODERN JAVASCRIPT TODAY 


mon 


"ZB 

fa During development: Simply use the latest Google Chrome! === a pa 
=> == EE NES ESESSB g 

“7 During production: Use Babel to transpile and polyfill your code (converting | = —as 7 = 


back to ES5 to ensure browser compatibility for all users). = | : 


Will add new videos 


| 
tia |» | [= | - è | = | w [rue] nee] 
az A e 
Ashe o00GS erans [| [20 a 2: BEE I IE ET | 


http://kangax.github.io/compat-table 


EL 


Fully supported in all browsers (down to IE 9 from 2011); 
Ready to be used today & 


ES6+: Well supported in all modern browsers; 
No support in older browsers; 


Can use most features in production with transpiling and polyfilling Y 


ESNext: Future versions of the language (new feature proposals that reach Stage 4); 


Can already use some features in production with transpiling and polyfilling. 
(As of 2020) 


MODERN JAVASCRIPT FROM THE BEGINNING 


ØY Learn modern JavaScript from the beginning! 


© But, also learn how some things used to be done before modern JavaScript 
(e.g. const € let vs var and function constructors vs ES6 class). 


3 reasons why we should not forget the Good Ol’ JavaScript: 


= You will better understand how JavaScript actually works; 
< Many tutorials and code you find online today are still in ES5; 


+ When working on old codebases, these will be written in ES5. 
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LECTURE 


FUNCTIONS CALLING OTHER 
FUNC HONS 


CALLING A FUNCTION INSIDE A FUNCTION: DATA FLOW 


const cutPieces = function (fruityæi 
return fruit x% 4; 


return Juice; 


console.log (fruitProcessor[2] BP 
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LEC TURE 
RE VIEWING FUNCTIONS 


FUNCTIONS REVIEW: 3 DIFFERENT FUNCTION TYPES 


Function declaration 
calcAge(birthYear) { 


return 2037 - birthYear; 


Function that can be 
used before It's declared 


Function expression ca LcAge (birthYear) Å 


return 2037 birthYear; 


Essentially a function 
value stored in a variable 


calcAge birthYear => 2037 - birthYear; 


Arrow function 


Great for a quick one-line 


functions. Has no this | "= | | 
e Three different ways of writing functions, but they all work in a 
keyword (more later...) 


similar way: receive input data, transform data, and then output data. 


I IN I AA = I AnI AAA 
A NH (em \ "arm (IN IA (AN e N J/ || IN f 
A (ea CNN YM | “MJ N/A dn 
| | | AN | | Hl | IN al Wil MJÍ | WM JAN U7 | | 
er NWI | Å R JJ IL MJ) | MIS | 
== || WII | Å N IT Im W\/ IL | IV/AJY | 
| | AN si | \ Ny mm | | I ALY / i | 
| | AN] || oy MJ) | » | | \ | WW f | | 
WJ) WW) | W Il WY | | | | 
i NY ll UY DØ 1 MAA MM — | 


Parameters: placeholders to receive input Function body: block of code that 
values. Like local variables of a function we want to reuse. Processes the 


\ function's input data 
function calcAge (lbirthYear, firstNamel { / 
const age = 2037 - birthYear; 
console.log( ${firstName} is S{age} years old ); 


>return age; 


e ee 


Function name 


return statement to 
output a value from 
the function and 

terminate execution 


const age = calcAge 1991, 'Jonas') | | mare 
HL Calling, running or invoking 


N the function, using () 


Variable to save returned Arguments: actual values 
value (function output) of function parameters, to 
input data 
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LEG TURE 
LEARNING HOW 10 CODE 


HOW TO FAIL ® AT LEARNING HOW TO CODE 


John 
(not actually...) 


Mm X% 


*x 2% k >% 


He didn't have a clear goal at the beginning of his journey 


He started by watching courses and reading tutorials, but he would just copy the 
code without caring how it works. Sometimes he would just copy and paste code! 


He didn't reinforce what he was learning by doing small challenges or taking notes 
He didn't practice coding, and didnt come up with his own project ideas 

He quickly became frustrated when his code was not perfectly clean or efficient 
He lost motivation because he thought he could never know everything 

He was learning in isolation 


After finishing a couple of courses, he thought he now was a web developer and 
could start applying to jobs. But he couldn't even build an app on his own! 


HOW TO SUCCEED ¿> AT LEARNING HOW TO CODE 


34 He didn't have a clear goal at 3 He would just copy the code ə% He didn't reinforce what he 
the beginning of his journey without caring how it works. was learning by doing small 
Sometimes he would just challenges or taking notes 
copy and paste code! 
y FIX 
4 FIX 
de Seta specific, measurable, 4 FIX 
realistic and time-based goal le After you learn a new feature 
le Understand the code that or concept, use it immediately 
de Know exactly why you are 
ee. you're studying and typing 
learning to code: Switching le Take notes 
careers? Finding a better job? 45 Always type the code, don't ù 
Challenge yourself and 
: ; copy-paste! 
& Imagine a big edi PN practice with small coding 
want to be able to build! exercises and challenges 
dE Research technologies you de Don't be in a hurry to 


need and then learn them 
complete the course fast! 


HTML ESS 


GE s SV © 


0 codewars (53) 


PAUSE THE VIDEO 
FOR CHALLENGE 


He didn't practice coding, and 
didn't come up with his own 
project ideas 


4 FIX 


Practicing on your own is the 
most important thing to do 


This is NOT optional! Without 
practice outside of courses, 
you won't go anywhere! 


Come up with your own 
project ideas or copy popular 
sites or applications, or just 
parts of them in the beginning 


Don't be stuck in "tutorial hell” 


HOW TO SUCCEED ¿> AT LEARNING HOW TO CODE 


He quickly became frustrated 
when his code was not 
perfectly clean or efficient 


y FIX 


Don't get stuck trying to write 
the perfect code! 


Just write tons of code, no 
matter the quality! 


Clean and efficient code will 
come with time 


You can always refactor code 
later 


34 He lost motivation because he 
thought he could never know 
everything 


4 FIX 


dE Embrace the fact that you will 
never you know everything 


dE Just focus on what you need 
to achieve your goal! 


getify y 
@getify 


20+ yrs dev exp, 8 books w/ 100k+ copies sold, 300k+ hours 
watched of my videos, 4k+ taught in person... 


And you know what? | still struggle to get my code to work and 
it's still a tedious slog. And my code still confuses me the next 
day. 


You're not alone in these struggles. 


(7 6,015 3:33 PM - Mar 10, 2018 


HOW TO SUCCEED ¿> AT LEARNING HOW TO CODE 


34 He was learning in isolation After finishing a couple of 
courses, he thought he now 
was a web developer and 

4 FIX could start applying to jobs 


“= Explain new concepts to other 
people. If you can explain it, y FIX 
you truly understand it! 
45 The biggest misconception 
“= Share your goals to make that people have! 
yourself accountable 
“ Courses are an amazing NEXT SLIDE 


“e Share your learning progress starting point, but are only the 


with the web dev community 
(+100DaysOfCode, WW 
#CodeNewbie, ffwebdev, etc.) 


beginning of your Journey! 


LEARNING RÓW TO CODE IS HARD, BUT YOU CAN DO IT! 


Study courses: understand code, take 
challenges and notes 


y 


Stay motivated! Keep writing lots of 
code on your own, no matter how bad 


y 


Everything 
| IS awesome 


Cliff of 


JOB READY 


Learn with other people, devs and 
beginners, and share progress 


ñ 


| 
i | | 
. | | 
b | | 
Y 
I i Keep challenging yourself, run into lots 
| | of problems, and fix them 
| | 
| 
| | 


Back to 
awesome 


Confidence 


y 


Round up your skillset with best 
practices and tools (git, testing, ...) 


y 


Competence 


You're probably 
somewhere here 


Source: https://www.thinkful.com/blog/why-learning-to-code-is-so-damn-hard/ 
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LECTURE 


HOW TU THINK LIKE A DEVELOPER: 
BECOME A PROBLEM SULVERI 


HOW TO FAIL ® AT SOLVING PROBLEMS 


John can 
code now & 


< Example: In an array of 
GPS coordinates, find 
the two closest points 


WHENEVER JOHN ENCOUNTERS A PROBLEM: 


34 He jumps at the problem without much thinking 
34 He implements his solution in an unstructured way 
34 He gets stressed out when things don't work 


34 He is too proud to research solutions 


y FIX 


Stay calm and slow down, don't just jump at a problem without a plan 


Take a very logical and rational approach (programming is just logic, in the end...) 


Use my 4-step framework to solve any problem 
NEXT SLIDE 


4 STEPS TO SOLVE ANY PROBLEM 


EXAMPLE 


y Project Manager. “We need a function 
that reversesjwhatever|we pass into it” 


What does “whatever” even mean in this context? 
What should be reversed? Answer: Only strings, 
numbers, and arrays make sense to reverse... 


& What to do if something else is passed in? 


& What should be returned? Should it always be a 
string, or should the type be the same as passed In? 


< How to recognize whether the argument is a number, 
a String, or an array? 


< How to reverse a number, a string, and an array? 


4 STEPS TO SOLVE ANY PROBLEM 


EXAMPLE 


y Project Manager. “We need a function 
that reverses whatever we pass Into It" 


SUB-PROBLEMS: 


ge 


" 
M 
M 
pi 


Check if argument is a number, a string, or an array 
Implement reversing a number 

Implement reversing a string 

Implement reversing an array 


Return reversed value 


NM Looks like a task list that we 


need to implement 


4 STEPS TO SOLVE ANY PROBLEM 


EXAMPLE 


Make sure you 100% understand the 
1 problem. Ask the right questions to get 
a clear picture of the problem sv Project Manager. “We need a function 
that reverses whatever we pass into It" 


m 3 < How to check if a value is a number in JavaScript? 
Divide and conquer: Break a big 
problem into smaller sub-problems. & How to check if a value is a string In JavaScript? 
+ & How to check if a value is an array in JavaScript? 


& How to reverse a number in JavaScript? 
Dont be afraid to do as much 


research as you have to & How to reverse a string in JavaScript? 


& How to reverse an array in JavaScript? 


\ 
Google > stackoverflow GTA 


4 STEPS TO SOLVE ANY PROBLEM 


EXAMPLE 
Make sure you 100% understand the 


1 problem. Ask the right questions to get 
that reverses whatever we pass into It" 


Divide and conquer: Break a big 
problem into smaller sub-problems. 


A function reverse(value) 
if value type !string && !number && !array 


return value 


y 1f value type == string 
reverse string 
Don't be afraid to do as much : m 
3 1f value type == number 
research as you have to 
reverse number 
4 if value type == array 


reverse array 


For bigger problems, write pseudo-code 
before writing the actual code 


Ja 


return reversed value 
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SECTION 
DEVELOPER SKILLS & EDITUR SETUP 


LEG TURE 
JEBUGGING (FIXING ERRURS) 


WHAT IS A SOFTWARE BUG? 


< Software bug: Defect or problem in a computer program. 
Basically, any unexpected or unintended behavior of a 
computer program Is a software bug. 


< Bugs are completely normal in software development! 


< Previous example: “We need a function that reverses whatever 


we pass Into It” 


reverse([1, 3, 5, 7]) 
Unexpected result: the array 


y is scrambled, NOT reversed. 


a So there is a bug in the 
reverse function % 


[5, 1, l, 3] 


<- Debugging: Process of finding, fixing and preventing bugs. 


0 Sve On Åram An HÅ / „u 270 9.037 yy7 0:5 
/ 000 “ Si NADA 9.037 yG 795 
13 vc (032 MP -mc HEL 62) 7-6/5 92508 


633) PRO 2. 1doyacyıs 
2 | AN, GE, | 
RAS 6-1 — 033 fl a pe end 


im 


Start G J (s | 
1/99 Jar = sine ed ul check 
15 23 bal | AN u lbs es Test 


Relay * 70 Br 


(mo tt) in fe lay > 


First a 4a case of bu ARA found, 
TAH Go dram sr tad] N 1 ) 
RPE oa : 


A real bug which was 


causing an error in Harvard's 


computer in the 1940s 


The DEBUGGING PROCESS 


Isolating where RE 
Becoming aware g Preventing it from 


va that there is a bug LT operino a. va Ed ls DUE f happening again 


k- > E > KM 


< During development < Developer console < Replace wrong © Searching for the 


| (simple code) solution with new same bug in similar 
< Testing software 

correct solution code 
& Debugger (complex 


code) &- Writing tests using 
testing software 


< User reports during 
production 


< Context: browsers, 
users, etc. 


JAVASCRIPT IN THE 
BROWSER: DOM AND 
EVENIS 
FUNDAMENTALS 
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SECTION 


JAVASCRIPT IN THE BROWSER: DOM 
AND EVENTS FUNDAMENTALS 


LECTURE 


WHATS Tre UUM AND DOM 
MANIPULATION 


WHAT IS The DOM? 


Tree structure, generated 


by browser on HTML load N 
OM 
| EA 


DOCUMENT OBJECT MODEL: STRUCTURED 
REPRESENTATION OF HTML DOCUMENTS. ALLOWS 
JAVASCRIPT TO ACCESS HTML ELEMENTS AND 
STYLES TO MANIPULATE THEM. 


Change text, HTML attributes, 
and even CSS styles 


The DOM TREE STRUCTURE 


a Special object that is the entry 
DOCUMENT point to the DOM. Example: 


| document.querySelector() 


ELEMENT A 


A Simple Page 


<html> 


nn 


ELEMENT ELEMENT ¿=== 


<head> <body> 
A paragraph with a'<a>link ELEMENT ELEMENT ELEMENT ¢— 
<title> <section> <section> 


A second paragraph 


=i TEXT ELEMENT ELEMENT ELEMENT m 


“A Simple Page” <p> <p> <img> 


TEAT TEXT 
“A paragraph ” “A second para...” 
v 


src="dom.png" alt="The DOM 


DOM !== JAVASCRIPT © 


DOM Methods and 
Properties for DOM 
Manipulation 


No For example oecma 


document.querySelector() 


Dan API: Application Programming Interface 
WEB APIs DOM Methods and 
Properties å 
Sr P «E 


HOW JAVASCRIPT 
WORKS BEHIND THE 


SCENES 
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SECTION 


HUW JAVASCRIPT WORKS BEHIND [HE 
SCENES 


LECTURE 


AN HIGH-LEVEL OVERVIEW Ur 
JAVASCRIP | 


WHAT IS JAVASCRIPT: REVISITED 


JAN ASCAIPT 


JAVASCRIPT IS A HIGH-LEVEL, 
OBJEC T-ORIEN TED, MULTI-PARADIGM 
PROGRAMMING LANGUAGE. 


WHAT IS JAVASCRIPT: REVISITED 


JAN ASCAIPT 


JAVASCRIPT IS AJHIGH-LEVEUIPROTOT YPE-BASED OBJECT-ORIENTED 


MULTI-PARADIGMIIINTERPRE TED OR JUST-IN- TIME COMPILED 
DYNAMICISINGLE-THREADEDIGARBAGE-COLLECTEDIPROGRAMMING 


LANGUAGE WITHIFIRS I-CLASS FUNC TIONSIAND A NON-BLOCKING 
EVENT LOOP CONCURRENCY MODEL © & Y 


DECONSTRUCTING THE MONSTER DEFINITION 


High-level 


Garbage-collected 


Interpreted or just-in-time compiled 


Multi-paradigm 


Prototype-based object-oriented 


First-class functions 


Dynamic 


Single-threaded 


Non-blocking event loop 


DECONSTRUCTING THE MONSTER DEFINITION 


Garbage-collected 


Interpreted or just-in-time compiled 


Multi-paradigm 


Prototype-based object-oriented 


First-class functions 


Be 


LOW-LEVEL HIGH-LEVEL 


Single-threaded 
Developer has to manage Developer does SO have 
resources manually to worry, everything 


Non-blocking event loop happens automatically 


Dynamic 


DECONSTRUCTING THE MONSTER DEFINITION 


Interpreted or just-in-time compiled 


Multi-paradigm 


— Cleaning the memory 


Prototype-based object-oriented so we dont have to 


First-class functions 


Dynamic 


Single-threaded 


Non-blocking event loop 


DECONSTRUCTING THE MONSTER DEFINITION 


High-level 


N Abstraction over 


Os and Is 


Garbage-collected 


Interpreted or just-in-time compiled 


CONVERT TO MACHINE CODE = COMPILING 


NM Happens inside the 


JavaScript engine 


Multi-paradigm 


Prototype-based object-oriented 


First-class functions 


Dynamic 


ka More about this Later in this Section * 


Non-blocking event loop 


DECONSTRUCTING THE MONSTER DEFINITION 


Prototype-based object-oriented 


First-class functions 


Dynamic 


Single-threaded 


Non-blocking event loop 


< Paradigm: An approach and mindset of structuring code, which will 
direct your coding style and technique. 


The one we've been 
7 using so far 


© Procedural programming 


| e Imperative vs. 
* Object-oriented programming (OOP) 


“Y Declarative 
3 Functional programming (FP) 


More about this later in Multiple Sections <- 


DECONSTRUCTING THE MONSTER DEFINITION 


High-level OLE 


Array 


Array.prototype.push 
Array.prototype.indexOf 


Garbage-collected 
(Oversimplification!) 


Interpreted or just-in-time compiled 


Multi-paradigm 


Our array Built from prototype 
inherits methods 
Prototype-based object-oriented from prototype | | 
arr 1052 93 
arr.push(4) 


Dynamic 


II FARBEN More about this in Section Object Oriented Programming <- 


Non-blocking event loop 


DECONSTRUCTING THE MONSTER DEFINITION 


High-level + Ina language with first-class functions, functions are simply treated 
as variables. We can pass them into other functions, and return them 


Garbage-collected | 
J KON UE UON. 


Interpreted or just-in-time compiled 


Multi-paradigm closeModal = () { Passing a function into another 
modal.classList.add("hidden function as an argument: 
overlay.classList.add("hidden First-class functions! 


Prototype-based object-oriented 4 


overlay.addEventListener("click", closeModal) 


First-class functions 
Dynamic 
dle ais More about this In Section A Closer Look at Functions <- 


Non-blocking event loop 


DECONSTRUCTING THE MONSTER DEFINITION 


High-level 


Garbage-collected & Dynamically-typed language: 


Interpreted or just-in-time compiled No data type definitions. Types 
becomes known at runtime 


Multi-paradigm 


Data type of variable is 
Prototype-based object-oriented automatically changed 


First-class functions 


Dynamic 


Single-threaded 


Non-blocking event loop 


DECONSTRUCTING THE MONSTER DEFINITION 


High-level = Concurrency model: how the JavaScript engine handles multiple tasks 
happening at the same time. 


Garbage-collected | Why do we need that? 


Interpreted or just-in-time compiled + JavaScript runs in one single thread, so it can only do one thing at a time. 


Multi-paradigm l So what about a long-running task? 


“ Sounds like ıt would block the single thread. However, we want non-blocking 
Prototype-based object-oriented behavior! 


NR 
First-class functions | How do we achieve that? HEN 


& By using an event loop: takes long running tasks, executes them in the 


Dynamic “background”, and puts them back in the main thread once they are finished. 


Single-threaded 


Non-blocking event loop More about this Later in this Section +; 
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SECTION 


HUW JAVASCRIPT WORKS BEHIND [HE 
SCENES 


LECTURE 


THE JAVASCRIPT ENGINE AND 
RUNTIME 


WHAT IS A JAVASCRIPT ENGINE? 


PROGRAM THAT EXECUTES 
JAVASCRIPT CODE. 


Object in 


| memory 
Execution 
context 
< Example: V8 Engine 
CALL STACK HEAP 
How Is it «— Where pur code Where objects 
compiled? Is executed are stored 


COMPUTER SCIENCE SIDENOTE: COMPILATION VS. INTERPRETATION & 


& Compilation: Entire code is converted Into machine code at once, and written to a binary file that can be executed by a computer. 


STEP 1 STEP 2 
COMPILATION EXECUTION 


== Can happen way after compilation 


= Interpretation: Interpreter runs through the source code and executes It line by line. 


STEP 1 
===)» 
EXECUTION LINE BY LINE 


Code still needs to be converted to machine code 


Source code 


< Just-in-time (JIT) compilation: Entire code is converted into machine code at once, then executed immediately. 


STEP 1 STEP 2 
COMPILATION EXECUTION 


NOT a portable file — o Happens immediately 


MODERN JUST-IN- TIME COMPILATION OF JAVASCRIPT 


In ed la 


= AST Example 


‘Js ENGINE 


Happens I In special ariableDeclaration 
= — example —— 
threads that we can't 
d: 13 
access from NZ > 
- declarations: | 
- VariableDeclarator { 
start: 6 
= ier { 
Starts 
end: 7 
Just-in-time 
= a wii 
- init: Literal = $node ( 
start: 10 


: } 
x Happens ın 
= 
Call Stack ind: "const" 
q During execution! 


The BIGGER PICTURE: JAVASCRIPT RUNTIME 


I 22 
z 


JS RUNTIME IN THE BROWSER © >, 
Functionalities provided to 


C Container including all the things w © the engine, accessible on 
JS ENGINE that we need to use „WEB'APIS window object 
(in this case in the browser 


EVENT LOOP <= Essential for non-blocking concurrency model 


CALLBACK QUEUE 


Ne Example: Callback function from DOM event listener 


HEAP CALL STACK 


The BIGGER PICTURE: JAVASCRIPT RUNTIME 


“Js RUNTIME IN NODE.JS nede 


‘Js ENGINE DA 


C++ BINDINGS & 
THREAD POOL 


EVENT LOOP 


CALLBACK QUEUE 


HEAP CALL STACK 
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SECTION 


HUW JAVASCRIPT WORKS BEHIND [HE 
SCENES 


LECTURE 


EXECU HON CONTEXTS AND IHE 
CALL STACK 


WHAT IS AN EXECUTION CONTEXT? 


4 
— 


aS 


Human-readable code: 


Function body 
only executed 
when called! 


Compilation 


Creation of global execution 
context (for top-level code) 


NOT inside 
a function 


Execution of top-level code 
(inside global EC) 


y 


por of functions and 
walting for callbacks 


Example: click event callback A 


EXECUTION 


EXECUTION CONTEXT 


Environment in which a piece of JavaScript 
is executed. Stores all the necessary 
information for some code to be executed. 


“JavaScript code" 


Pizza “execution context” 


< Exactly one global execution context (EC): 
Default context, created for code that is not 
inside any function (top-level). 


< One execution context per function: For each 
function call, anew execution context Is created. 


All together make the call stack Å 


EXECUTION CONTEXT IN DETAIL 


WHAT'S INSIDE EXECUTION CONTEXT? 


3 


name = ‘Jonas 


First SS=" 


Variable Environment ae], 
| b = second(7, 9) 

let, const and var declarations Ser 

Functions return a; 


}; 
argrments object 


second(x, y) { 


Scope chain c= 4 
return C; 


| } 
th+s_keyword 


x= first(); 


Global 


name = ‘Jonas’ 
first = <function> 
second = <function> 
x = <unknown> 


1 
<unknown> 


c = 2 
arguments = |7, 9] 


(Technically, values 
only become known 
during execution) 


The CALL STACK 


Compiled code starts execution 


name = Jonas ; 
First. => 


b = second(7, 9); 
a=a+b: 
return 4; 


+: 


second() 


first() 


ANIONS Sf 


second(x, y) { 
EI 2 z 
return Cc; 


Global 
} 


x= first(); 


CALL STACK 
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SECTION 


HUW JAVASCRIPT WORKS BEHIND [HE 
SCENES 


LEC TURE 
SCUPE AND THE SLUPE CHAIN 


SCOPING AND SCOPE IN JAVASCRIPT: CONCEPTS SEK CONTEK? 


< this keyword 


E CONCEPT 9 


SCOP 


< Scoping: How our programs variables are organized and accessed. “Where do variables 
live?’ or “Where can we access a certain variable, and where not?” 


& Lexical scoping: Scoping is controlled by placement of functions and blocks In the code; 


< Scope: Space or environment in which a certain variable is declared (variable 
environment in case of functions). There is global scope, function scope, and block scope; 


< Scope of a variable: Region of our code where a certain variable can be accessed. 


The 3 TYPES OF SCOPE 


GLOBAL SCOPE FUNCTION SCOPE BLOCK SCOPE (E56) 


me = 'Jonas'; calcAge(birthYear) { if (year >= 1981 && year <= 1996) { 

job = ‘teacher’; now = 2037; millenial = true: 

year = 1989; age = now — birthYear; food = ‘Avocado toast'; 
return age; 


) — Example: if block, for loop block, etc. 


‚log(millenial); 


. Log (now) ; 


Outside of any function or block Variables are accessible only Variables are accessible only 


| | inside function, NOT outside inside block (block scoped) 
Variables declared in global 


scope are accessible everywhere Also called local scope A HOWEVER, this only applies to 


let and const variables! 


Functions are also block scoped 
(only in strict mode) 


The SCOPE CHAIN 


(Considering only 


variable declarations) 
Global scope 


const myName Jonas '; Gen] 
opal varıa e A 
myName = “Jonas” 


function first() { 
const age 30; 
Å SCOPE CHAIN 
age 30 
cofist decade cy. 
var millenial = true; 


first() scope 


age = 30 
===> millennial = true 
= © 9 
function second myName Jonas Scope has access 


const job 'teachey'; 


nad to variables from 
R all outer scopes 


console. lLog(`${myNamef is a $jagef-old $ij 


second () scope 


decade job = “teacher” 


second 


VARIABLE LOOKUP IN SCOPE CHAIN 


age = 30 
millennial = true 


age = 30 
millennial = true 


myName = “Jonas” myName = “Jonas” 


SCOPE CHAIN VS. CALL STACK 


= ‘Jonas 

first(): third() EC 
first 

b = 'Hello!'; 

second(); second() EC 

second() I 

H1!'; 
first() EC 


third() { 


d = 'Hey!'; 
. Log ; 


Global EC 


a = “Jonas?” 
first = <function> 
third = <function> 


CALL STACK 


Order ın which 
functions were called 


d = “Hey!” 


b = “Hello!” 
second = <function> 


Global scope 


a = “Jonas” 
<function> 
<function> 


first = 
third = 


Å 


first() scope 


b = “Hello!” 

second = <function> 
a = “Jonas” 

first = <function> 
third <function> 


second() scope 


c = “Hi!” 
b = “Hello!” 
second = <function> 


a= “Jonas” 


first = <function> 
third = <function> 


4 


third() scope 


d = “Hey!” 


a = “Jonas” 


first = <function> 
third = <function> 


SCOPE CHAIN 


Order in which functions 


are written in the code 


Has nothing to do 
with order in which 
functions were called! 


SUMMARY © 


< Scoping asks the question “Where do variables live?’ or “Where can we access a certain variable, and where not?” 
< There are 3 types of scope in JavaScript: the global scope, scopes defined by functions, and scopes defined by blocks; 
< Only let and const variables are block-scoped. Variables declared with var end up in the closest function scope; 


< In JavaScript, we have lexical scoping, so the rules of where we can access variables are based on exactly where in the 
code functions and blocks are written; 


< Every scope always has access to all the variables from all its outer scopes. This is the scope chain! 


© When a variable is not in the current scope, the engine looks up in the scope chain until it finds the variable it's looking 
for. This Is called variable lookup; 


© The scope chain is a one-way street: a scope will never, ever have access to the variables of an inner scope; 
& The scope chain in a certain scope Is equal to adding together all the variable environments of the all parent scopes; 


& The scope chain has nothing to do with the order in which functions were called. It does not affect the scope chain at all! 
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SCENES 


LECTURE 


VARIABLE ENVIRONMENT: HOISTING 
ANU Tre TUZ 


HOISTING IN JAVASCRIPT 


& Hoisting: Makes some types of variables accessible/usable in the code before they are EXECUTION CONTEXT 
actually declared. "Variables lifted to the top of their scope”. 


l BEHIND THE SCENES Scope chain 
< this keyword 
Before execution, code Is scanned for variable declarations, and for each variable, a new 


property is created in the variable environment object. 


HOISTED? INITIAL VALUE SCOPE Me mod 
Otherwise: function! 
4 4 4 
function declarations YES Actual function Block 
var variables YES undefined Function 


Technically, yes. But 


{ not in practice 


let and const variables Q NO <uninitialized>, TDZ Block 


function expressions and arrows wr Depends if using var or let/const temporale ao zone 


TEMPORAL DEAD ZONE, LET AND CONST 


myName = Jonas 
TEMPORAL DEAD ZONE FOR job VARIABLE 
if (myName === 'Jonas') { 

console. log( Jonas is a ${job} ); 

const age = 2037 - 1989; Different kinds of error messages: 

console. log(age) ; 


job j= ‘teacher 
log (x) 


WHY HOISTING? 


Using functions before actual declaration; Makes It easier to avoid and catch errors: accessing variables 


WHY TDZ? 


OO before declaration Is bad practice and should be avoided: 
var hoisting Is just a byproduct. 


Makes const variables actually work 
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HUW JAVASCRIPT WORKS BEHIND [HE 
SCENES 


LEC TURE 
Ire THIS KEYWORD 


HOW The This KEYWORD WORKS 


& this keyword/variable: Special variable that is created for every execution context (every function). EXECUTION CONTEXT 


Takes the value of (points to) the “owner” of the function in which the this keyword is used. Variable environment 


EJ Scope chain 
© this is NOT static. It depends on how the function is called, and its value is only assigned when the 


function Is actually called. 
< Method example: 


Method <- this = <Object that is calling the method> popes to wise: 
window (in the browser) 
Don't get Simple function call < this = undefined 


own this 
NS » Arrow functions & this = <this of surrounding function (lexical thi s)> 


this). year 


Event listener < this = <DOM element that the handler is attached to> 


new, call, apply, bind < <later in the course... > 
calcAge jonas 1989 


is method 


& this does NOT point to the function itself, and also NOT the its variable environment Way better than using 
jonas.year! 
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GUT QUESTIONS? FEEDBACK? 


JUST POSI IT IN THE G&A UF THIS 
VIDEO, ANU YOU WILL GET HELP 
THERE! 
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LECTURE 


PRIMITIVES VS. OBJECTS (PRIMITIVE 
VS. REFERENCE TYPES) 


REVIEW: PRIMITIVES, OBJECTS AND THE JAVASCRIPT ENGINE 


Js ENGINE OBJECTS 


PRIMITIVES 


< Number 


= Object literal 


STORED IN 
= String = Arrays 
= Boolean & Functions 
<= Undefined ARDY < Many more... 
= Null 
+ Symbol t 
<=  Bigint REFERENCE TYPES 


CALL STACK HEAP 


I 


PRIMITIVE TYPES 


PRIMITIVE VS. REFERENCE VALUES 


Primitive values example: 


age = 30 
oldAge = age; 
age = 31; 
. Log(age) 
. Log(oldAge) 


Reference values example: 


me = 4 


name: Jonas No problem, because 


we're NOT changing the 


value at address 0003! 


„log('Friend:', friend); 


‚log('Me:', me); 


[27] 


Identifier Address 
age 0001 
oldAge 0002 
me 0003 
friend 

CALL STACK 


Value Address Value 


30 X Å 
name: 
D30F ge: 

} 


31 nn 


‘Jonas’; 
A; 


27 
D30F 


HEAP 


HOW JAVASCRIPT WORKS BEHIND THE SCENES TOPICS FOR LATER... & 


Prototypal Inheritance & Object Oriented Programming (OOP) With JavaScript 


Event Loop « Asynchronous JavaScript: Promises, Async/Awalt and AJAX 


How the DOM Really Works « Advanced DOM and Events 


DATA STRUCTURES, 
MODERN OPERATORS 
AND STRINGS 
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DATA STRUCTURES, MODERN 
OPERATORS AND STRINGS 


LECTURE 


SUMMARY: WHICH DATA STRUCTURE 
TU USE? 


DATA STRUCTURES OVERVIEW 


SOURCES OF DATA 


© From the program itself: Data written directly in source code (e.g. status messages) 


“Object” 
i 


"count": 3, Array 
"recipes": | y 


i { 
© From the Ul: Data input from the user or data written in DOM (e.g tasks in todo app) "publisher": "101 Cookbooks", 
"title": "Best Pizza Dough Ever", 
"source_url": "http://www.101cookbooks.com/archiv 


"recipe_id": "47746", 


@ From external sources: Data fetched for example from web API (e.g. recipe objects) = “image_url": *kttp:Z/forki ty-apt. herokiiage con/in 


"social_rank": 100, 


"publisher_url": "http://ww,101cookbooks. com" 


Å dæ Object" 


Application 


"publisher": "The Pioneer Woman", 
Programming "title": "Deep Dish Fruit Pizza", 
"source. url": "http://thepioneerwoman.com/cooking 
Interface "recipe_id": "46956", 
image_url": "http://forkify-api.herokuapp.com/im 
z "social_rank": 100, 
OTHER BUILT-IN: "publisher_url": "http://thepioneerwoman. com" 
J; 
< WeakMap { 
"publisher": "Closet Cooking", 
+ WeakSet "title": "Pizza Dip", 
"source_url": "http://www. closetcooking.com/2011/ 
"recipe_id": "35477", 
NON-BUILT IN: image_url": "http://forkify-api.herokuapp. com/im 
"social_rank": 99.99999999999994, 
< Stacks "publisher_url": "http://closetcooking. com" 
} 
= Queues SIMPLE LIST? KEY/VALUE PAIRS? i 
. } 
< Linked lists 
& Trees Keys allow usto * JSON data format example 
< Hash tables Arrays or Sets Objects or Maps <_—— describe values 


ARRAYS VS. SETS AND OBJECTS VS. MAPS 


ARRAYS VS. 


tasks = ['Code', 'Eat', 'Code']; 


Use when you need ordered 


list of values (might contain 
duplicates) 


Use when you need to 
manipulate data 


SETS 


tasks = new (['Code', 'Eat', 'Code']) 


Use when you need to work 
with unique values 


Use when high-performance 
is really important 


Use to remove duplicates 
from arrays 


OBJECTS 


task = { 
task: 'Code', 
date: 'today', 


repeat: true 


> 


More “traditional” key/value 
store (“abused” objects) 


Easier to write and access 
values with . and [| 


Use when you need to 
include functions (methods) 


Use when working with 
JSON (can convert to map) 


VS. 


task = new ([ 
'task', 'Code'], 
date’, 'today'l, 
false, 'Start coding! ' 
1); 


Better performance 
Keys can have any data type 
Easy to iterate 


Easy to compute size 


Use when you simply need 
to map key to values 


Use when you need keys 
that are not strings 


A CLOSER LOOK Al 
FUNCTIONS 
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LECTURE 


FIRS! CLASS AND AIGHER-ÜRDER 
FUNCTIONS 


FIRST-CLASS VS. HIGHER-URDER FUNCTIONS 


FIRST-CLASS FUNCTIONS NIGHER-ORDER FUNCTIONS 


JavaScript treats functions as first-class citizens A function that receives another function as an 

This means that functions are simply values argument, that returns a new function, or both 

Functions are just another “type” of object This Is only possible because of first-class functions 
Store functions in variables or properties: I Function that receives another function 


add =l(a, b) > a + b; 


counter = 4 


() { this.value+:; + 


Pass functions as arguments to OTHER functions: 


greet = () > ‚Log('Hey Jonas'); 
btnClose.addEventListener('click' | greet) 


Return functions FROM functions 


greet = = . Log (' He onas'); 
btnClosel addEventListener('click', 


2 Function that returns new function 


Higher-order 
COU 


count() { ECA 

NE function 
return 
Call methods on functions: nede, N Returned 


}; 
counter.inc someOtherObject) ; 


function 
} 
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A CLOSER LOUK Al FUNC HONS 


LECTURE 
ULUSUKES 


‘CREATING A CLOSURE 


Global scope 


secureBooking = <f> 


booker = <f> 
secureBooking = 


passengerCount = 0: 4 

secureBooking() scope 

return () I 5 P 
passengerCount + | 


secureBooking() EC log( SipassengerCount 
passengers” 


passengerCount = 0 


secureBooking = <f> 
booker = <f> 


passengerCount = 0 } 


Global EC / 


booker =|secureBooking(); 


secureBooking = <f> 


CALL STACK SCOPE CHAIN 


UNDERSTANDING CLOSURES 


secureBooking() EC 


passengerCount = 0 


secureBooking 
passengerCount 


return () I 
passengerCount+ |; 


booker () EC Log( S{passengerCount} 


passengers” 
<empty> >; 
+: “a This is the function 
secureBooking() ; 


Global EC 


secureBooking = <f> 


booker = <f> 
booker (): 


booker (): 


CALL STACK 


Global scope 


secureBooking = <f> 
booker = <f> 


secureBooking() scope 


passengerCount = 0 


secureBooking = 
booker = <f> 


secureBooking = 
booker = <f> 


SCOPE CHAIN 


UNDERSTANDING CLOSURES 


A function has access to the variable environment (VE) of the execution context in which It was created 


Closure: VE attached to the function, exactly as it was at the time and place the function was created 


secureBooking = 
passengerCount = 0; 


return () 4 
passengerCount++; 
booker () EC .Log( S{passengerCount} 


passengers ); 
<empty> } e 
r 


NM This is the function 


Global EC 
booker passengerCount = 
secureBooking = <f> 


booker = <f> 


CALL STACK 


Global scope 


secureBooking = <f> 
booker = <f> 


A 


secureBooking() scope 


passengerCount = 0 


secureBooking = <f> 
booker = <f> 


booker () scope 


<empty> 


secureBooking = 
booker = <f> 


SCOPE CHAIN 


CLOSURES SUMMARY © 


& A closure is the closed-over variable environment of the execution context in which a function was created, even after that 
execution context Is gone; 


| Less formal 


< A closure gives a function access to all the variables of its parent function, even after that parent function has returned. The 
function keeps a reference to ¡ts outer scope, which preserves the scope chain throughout time. 


I Less formal 
& A closure makes sure that a function doesn't loose connection to variables that existed at the function's birth place; 


13354000 
CD Aa = 
Less formal Å SH 7 
A Å 4 R 


Function Connection Parent scope Variables 


< Aclosure is like a backpack that a function carries around wherever it goes. This backpack has all the variables that were 
present in the environment where the function was created. Å Se 
G x 
A Ą R 


Function Closure Variables 


® We do NOT have to manually create closures, this is a JavaScript feature that happens automatically. We can't even 
access closed-over variables explicitly. A closure is NOT a tangible JavaScript object. 


WORKING WITH 
ARRAYS 
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SECTION 
WORKING WITH ARRAYS 


LECTURE 


DATA TRANSFORMATIONS: MAP. FILTER 
REDUCE 


DATA TRANSFORMATIONS WITH MAP, FILTER AND REDUCE 


van Original array 


Example Accumulator = 
current x 2% current > 2 acc + current 


FEEL) LLL ANI 
628 6 4 Em ME B Oun 


| 


HØNEN FI FI EJ EJ 
SESS RZL 


RL Filtered array 
& map returns a new array containing & filter returns a new array & reduce boils (“reduces”) all array 
the results of applying an operation containing the array elements that elements down to one single value 


on all original array elements passed a specified test condition (e.g. adding all elements together) 
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SECTION 
WORKING WITH ARRAYS 


LECTURE 


SUMMARY: WHICH ARRAY METHOD IU 
USE? 


WHICH ARRAY METHOD TO USE? & "I WANT..." 


To mutate original array 
< Add to original: 


(end) 


(start) 


< Remove from original: 


(end) 


(start) 


(any) 


< Others: 


A new array An array index 


< Computed from original: & Based on value: 


& Filtered using condition: 


+ Portion of original: 


& Adding original to other: An array element 


< Flattening the original: 


< Based on test condition: 


< Based on test condition: 


Know if array includes To transform to value 


< Based on accumulator. 


< Based on value: 


& Based on test condition: (Boil down array to single 
value of any type: number, 
string, boolean, or even new 


array or object) 


A new string 


To just loop array 


< Based on callback: 


& Based on separator string: 


(Does not create a new array, 
Just loops over it) 


ADVANCED DOM AND 
EVENIS 
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SECTION 
ADVANCED DOM ANU EVENTS 


LEC TURE 
HOW Tre UUM REALLY WORKS 


REVIEW: WHAT IS THE DOM? 


BROWSER 


INTERFACE 


< Allows us to make JavaScript interact with the browser; 


< We can write JavaScript to create, modify and delete HTML elements; 
set styles, classes and attributes; and listen and respond to events; 


= DOM tree is generated from an HTML document, which we can then 


Interact with; m | 
„as Application Programming Interface HAN 


< DOM is a very complex API that contains lots of methods and 


m 
properties to Interact with the DOM tree S : r 
Types” of 
DOM objects 


DOM tree .querySelector() / .addEventListener() / .createElement() / (next slide) 
.innerHTML / .textContent / .children / etc ... 


HOW The DOM API IS ORGANIZED BEHIND THE SCENES 


®MDN web docs Represented by 


| .addEventListener () 
JavaScript object N EventTarget .removeEventListener () 


.innerHTML .textContent 
.ClassList .childNodes 


.children .parentNode Global object, lots 
.parentElement .cloneNode() Window of methods and 
.append() properties, many 


.remove() unrelated to DOM INHERITANCE OF 
.insertAdjacentHTML() A M NL METHODS AND 


—> . querySelector () PROPERTIES 
.closest() 
oe. Text Comment Document 
.scrollIntoView() Example: 
‚setAttribute() Paragraph Somneni —p .querySelector() Any HTMLELement will 
Ser eateE lement) have access to 


.getElementById() .addEventListener(), 
HTMLElement .cloneNode() 
or .closest() methods. 


K VAN 


(One different type of 
HTMLButtonElement uuu HTMLDivElement HTMLElement per 
HTML element...) 


(THIS IS NOT A DOM TREE) 
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SECTION 
ADVANCED DOM ANU EVENTS 


LECTURE 


EVENT PRUPAGATION: BUBBLING ANU 
CAP TURING 


BUBBLING AND CAPTURING 


Click event 
DOCUMENT 
html 1 3 
head I 
CAPTURING BUBBLING 
title>A Simple P ZtIEL NT 
TELE imple Page 11 Le PHASE på PHASE 
/head 
body> 
section e: : 
querySelectom('section' ) 
addEventListeénmert CLICK 
p>A paragraph with al a>link</g | alert('You cliked me 8 
}) 
p>A second paragraph</p w 
/section 127.0.0.1:8080 says 
You cliked me © 
section { 
img dom. png" The DOM ELEMENT 
/section po 
document 
/b ody { queryS 
addEve | 
/html ELEMENT kg You cliked me 8 
230 
THIS DOES NOT HAPPEN ee 
( 2 TARGET PHASE You cliked me @ 
ON ALL EVENTS) 
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SECTION 
ADVANCED DOM ANU EVENTS 


LECTURE 


EFFICIENT SCRIP | LOADING: DEFER 
AND ASYNG 


DEFER AND ASYNG SCRIPT LOADING 


HEAD BODY END 
Time Execute DOMContentLoaded DOMContentLoaded 
[<script sro="sonipt.js"> — 


Execute DOMContentLoaded 


serif syn pro serii 


DEFER Execute 
[<scrip{ defer pro="script.js"> DOMContentLoaded 


< Makes no sense w 


REGULAR VS. ASYNG VS. DEFER 


ASYNG IN HEAD DEFER IN HEAD 


END OF BODY 


Run 


DOMContentLoaded Run DOMContentLoaded DOMContentLoaded 
“ Scripts are fetched and executed after the < Scripts are fetched asynchronously and = Scripts are fetched asynchronously and 
HTML is completely parsed executed immediately executed after the HTML ıs completely 
parsed 
Ø- Use if you need to support old browsers © Usually the DOMContentLoaded event 
waits for all scripts to execute, except for < DOMContentLoaded event fires after 


async scripts. So, DOMContentLoaded defer script is executed 


does not wait for an async script | i 
= Scripts are executed in order 


& Scripts not guaranteed to execute in order 


Use for 3rd-party scripts where order 
doesn't matter (e.g. Google Analytics) 


This is overall the best solution! Use for 
your own scripts, and when order matters 
(e.g. including a library) 


You can, of course, use different 
strategies for different scripts. Usually a 
complete web applications includes 
more than just one script 


Parse HTML 


Run Run 


DOMContentLoaded DOMContentLoaded 
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SECTION 


OBJECT ORIENTED PROGRAMMING 
(QUP) WITH JAVASCRIPT 


LECTURE 


WHAT Is OBJECT -URIEN I EU 
PROGRAMMING / 


WHAT IS OBJECT-ORIENTED PROGRAMMING? (00P) 


Style of code, “how” we 
write and organize code 


nor 


- Object-oriented programming (OOP) is a programming paradigm based on the 


concept of objects; 


Data E.g. user or todo list item 


< We use objects to model (describe) real-world or abstract features; En or data structure 
user 
user + 


i Objects may contain data (properties) and code (methods). By using objects, we 
passwor 


pack data and the corresponding behavior into one block; 
= In OOP objects are self-contained pieces/blocks of code; 


< Objects are building blocks of applications, and interact with one another; 


< Interactions happen through a public interface (API): methods that the code 
outside of the object can access and use to communicate with the object; 


Behaviour < OOP was developed with the goal of organizing code, to make it more flexible 
and easier to maintain (avoid “spaghetti code”). 


CLASSES AND INSTANGES (TRADITIONAL 00P) 


Conceptual overview: it works 
| Ua a bit differently in JavaScript. 
Instance > | Lok gk Still important to understand! 


user = 'jonas' 
password = 'dk23s 
email = 'hello@jonas.i 


login(password) { 


} 


sendMessage(str) { 


} 


user = 'mary 

password = 'qwerty23 
user email = 'mary@test.com 
password Login(password) + 


email K 


sendMessage(str) { 


Instance 
login(password) { } 


} user = 'steven' 
password = '5p8dz32dd' 


sendMessage(str) { email = 'steven@tes.co 


Login(password) 1 


} 


sendMessage(str) { 


} 


The 4 FUNDAMENTAL OOP PRINCIPLES 


The 4 fundamental 


principles of Object- 
va Oriented Programming 


© “How do we actually design classes? How 
do we model real-world data into classes?” 


PRINCIPLE 1: ABSTRACTION 


{ 
charge 
volume 
voltage 
temperature 
Abstraction EE | HO. Ja 1 
volumeBtn() {} || == I Å > > å charge 
screen() 4) | = Ger p volume 
Encapsulation verifyVott() 1) EEE m 
verifyTemp() {} 2 e 1 homeBtn() {} 
vibrate() {} | Br ssj | | volumeBtn() {} 
soundSpeaker() {} | === M screen() {} 
Inheritance soundEar() {} = | 


frontCamOn() {} 
frontCamOff() {} 
rearCamOn() {} 

rearcam0ff() {} 


Polymorphism 


Abstraction: Ignoring or hiding details that don't matter, allowing us to 
get an overview perspective of the thing we're implementing, instead of 
messing with details that don't really matter to our implementation. 


PRINCIPLE 2: ENCAPSULATION 


af 
user 
private !password 
private lemail 


Abstraction OA E 
is: password == word WHY? 


Encapsulation 


comment(text) { 
this .checkSPAM( text 


Prevents external code from 
accidentally manipulating 


Inheritance internal properties/state 
[private JehecspanCtext) < 
Allows to change internal 
Polymorphism implementation without the 


} risk of breaking external code 


Encapsulation: Keeping properties and methods private inside the class, 
so they are not accessible from outside the class. Some methods can 
be exposed as a public interface (API). 


PRINCIPLE 3: INHERIT ANCE 


Abstraction 


Encapsulation 


Inheritance 


Polymorphism 


CHILD CLASS 


user 
password 


email zab 
password 
login(password) { | small 
= permissions 


} 
Login(password) { 


sendMessage(str) 


} 


sendMessage(str) 


PARENT CLASS OWN methods ~—— 


Inheritance: Making all properties and methods of a certain class available 


} 


to a child class, forming a hierarchical relationship between classes. This 
allows us to reuse common logic and to model real-world relationships. 


PRINCIPLE 4: POLYMORPHISM 


{ 


INHERITANCE a INHERITANCE 
email 


{ 
user 
password 
email 
Encapsulation permissions 


{ 
user 
password 
email 
posts 


Abstraction 


login(password) 4 
y 


sendMessage(str) I 


} 


} login(password) { 
Inheritance PARENT CLASS , 
deleteUser(user) 4 writePost() { 
Polymorphism , i } 
} 
CHILD CLASS CHILD CLASS 


Polymorphism: A child class can overwrite a method it inherited from a 
parent class [it's more complex that that, but enough for our purposes]. 
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OBJECT ORIENTED PROGRAMMING 
(QUP) WITH JAVASCRIPT 


LEC TURE 
OOP IN JAVASCRIPT 


OOP IN JAVASCRIPT: PROTOTYPES 


CLASSICAL OOP’: CLASSES 


OOP IN JS: PROTOTYPES 


Class 


| INSTANTIATION 


Instance 


Objects (instances) are 
instantiated from a class, which 
functions like a blueprint; 


Behavior (methods) is copied from 
class to all instances. 


Prototype 


PROTOTYPAL INHERITANCE/ 
DELEGATION 


Objects are linked to a prototype object; 


Prototypal inheritance: The prototype 
contains methods (behavior) that are 
accessible to all objects linked to that 
prototype; 


Behavior ıs delegated to the linked 
prototype object. 


Example: Array 


[num |- ZAS 
[num map (v DN k2). 


+ [MDN web docs 


Array.prototype.keys() 
Array.prototype.lastIndexOf() 


Array.prototypeflmap( ) 


Array) © 


3 WAYS OF IMPLEMENTING PROTOTYPAL INHERITANCE IN JAVASCRIPT 


© “How do we actually create prototypes? And how do we link objects to © The 4 pillars of OOP 
prototypes? How can we create new objects, without having classes?” Amer 
<= Abstraction 
< Encapsulation 
© Constructor functions < Inheritance 
& Technique to create objects from a function; < Polymorphism 


& This is how built-in objects like Arrays, Maps or Sets are actually implemented. 


@ ES6 Classes 


& Modern alternative to constructor function syntax; 


& “Syntactic sugar”: behind the scenes, ES6 classes work exactly like constructor functions; 


= ES6 classes do NOT behave like classes in “classical OOP” (last lecture). 


($ Object.create( ) 


< The easiest and most straightforward way of linking an object to a prototype object. 
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OBJECT ORIENTED PROGRAMMING 
(QUP) WITH JAVASCRIPT 


LECTURE 


PRUTUTYFAL INHERITANCE AND THE 
PRO TO TYPE CHAIN 


HOW PROTOTYPAL INHERITANGE / DELEGATION WORKS 


¿prototype 
Constructor function Prototype 
[Person() ] h [Person. prototype] 
constructor 


Person = (name, birthYear) { 
this.name = name 
this.birthYear = birthYear 
} 


calcAge: function 


PROTOTYPAL 


DELEGATION 


jonas =| new ('Jonas', 1990) 


jonas.calcAge() 


Object 


[Jonas] 


name: ‘Jonas’ 


birthYear: 1990 


proto 
Person.prototype 


e This is how it works with function 
constructors and ES6 classes 


INHERITANCE/ .__proto_ 


NEW The new operator: 
I An empty object is created 


2 this keyword in 
constructor function call 
is set to the new object 


3 Thenew object is linked 
(__proto_ _ property) to 
the constructor function's 
prototype property 


4 The new object is 
returned from the 
constructor function call 


The PROTOTYPE CHAIN 


Constructor function 
[Object () ] 


Constructor function 


[Person()) |] 


Built-in constructor function 
for objects. This is used when 
we write an object literal: 


{..} === new Object(..) 


Prototype Object.prototype 


[Object.prototype] {constructor: f, __def 


Obje 


__proto__: null 


4 .__proto__ 


Prototype 


This is an OBJECT 
itself! Remember, every 


Ko object in JavaScript 


has a prototype! 


__proto__ 
Object.prototype 
Can't find 
4 . _ proto hasOwnProperty 
m m here! 


Object 
[jonas] 


__proto__: 
Person.prototype 


Can't find hasOwnProperty here! 


Here it is! 


PROTOTYPE 
CHAIN 


Series of links 
between objects, 
linked through 
prototypes 


(Similar to the 
scope chain) 


jonas.hasOwnProperty('name' ); 
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LEC TURE 
UBJEL |.LREATE 


HOW OBJECT.CREATE WORKS 


CONSTRUCTOR FUNCTIONS 


Prototype 


PersonProto 
L ] log(2037 - this.birthYear 


calcAge: function 


*Mrototusé 


Constructor furiction Prototype 


— O 


LPErson (hl [Person.prototype] 


calcAge: function 


.__proto__ steven = create{PersonProto) 


jonas = new ('Jonas', 1990); 


Object 


Object 
t a = | 
soki OBJECT.CREATE [jonas] 


name: “Steven? 
birthYear: 1990 


birthYear: 2002 


Person.prototype 
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INHERITANCE BETWEEN CLASSES : 
CONSTRUCTOR FUNC HONS 


INHERIT ANGE BETWEEN CLASSES 


van Parent 
“CLASS” 2 


PERSON 


— 


| INHERITANCE BETWEEN “CLASSES” 


g” Child 
"CLASS" 1 


—— 


STUDENT 


Y More specific type 


of person, ideal as 
Object child class 


' I 


g Using class terminology here to 
make it easier to understand. 


1 Constructor functions 


= ES6 Classes 


3 Object.create() 


INHERIT ANGE BETWEEN CLASSES 


Prototype 
Constructor function rototype] 
[Person( ) ] Person.prototype 


{species: 


() 


Student.prototype = Object.create|Person.prototype) A .__proto__ 


Prototype Create connection 
Constructor function [Student [prototype] manually using 


Object.create() 


[Student (|) ] oroto__: 


Student ('Mike Å .__proto__ 


Object 
[mike] 


proto__: 
Student. prototype 


PROTOTYPE 
CHAIN 


INHERIT ANGE BETWEEN CLASSES 


Student.prototype Object.create(Person.prototype) 


Prototype 
Constructor function [Person.prototype] 


[Person()] 


A 


Prototype 
Constructor function 
[Student()] 
Student.prototype 
= GOOD 


Prototype 


Constructor function [Person.prototype | 


[Person()] 


Student.prototype Person.prototype 


Constructor function 
[Student ()] 
Object 
| [mike] 
<P BAD 


__proto 


Student.prototype 


INHERITANCE BETWEEN CLASSES 


Prototype 
=> : =$ null 
Prototype [Object.prototype] 
Constructor function ‚[Person. >rototype] 
[Person()] __proto__: Person.prototype 
Object.prototype (species: 
() 
Student.prototype =) Object.create|Person.prototype) Å .__proto__ Here it is! 
Prototype 
Constructor function [Student prototype] AN 
[Student (|) ] oroto__: 


Can't find 
calcAge here! 
const mike Student ('Mike Å .__proto__ 


Object 
[mike] 


mike.calcAge() 


proto__: 
Student. prototype 


Can't find calcAge here! 
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INHERITANCE BETWEEN CLASSES : 
UBJECT CREATE 


INHERITANGE BETWEEN CLASSES : UBJECT.CREA TE 


calcAge: function 
Student 


create | PersonProto! inherits from 
Person 


Prototype 
[StudentProto] PROTOTYPE 
CHAIN 
proto : 


create |StudentProto Å .__proto__ 


Object 
[jay] 


proto  : 


StudentProto 
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LEC TURE 
E90 CLASSES SUMMARY 


extends 
university = I ersity of 
#studyHours = 0; 
#course; 
static numSubjects = 10; 


(fullName, birthYear, startYear, course) 
super(fullName, birthYear) ; 


this.startYear = startYear; 


this.#course = course; 


introduce() { 
.lLog( I study Sithis.Hcourse) at ${this.university} 


study(h) { 
this .#makeCoffe() ; 
this.#studyHours += h; 
} 


#makeCoffe() { 
return 'Here is a coffe for you @'; 


} 


testScore() { 


return this._testScore; 
y Classes are just 


“syntactic sugar” over 


testScore(score) 4 constructor functions 


this._testScore = score < 20 ? score : 


y Classes are not hoisted 


static printCurriculum() 4 Classes are first-class 


.Log( There are Sithis.numSubjects) subjects ); “a: 
citizens 


Class body is always 
student = new ('Jonas', 2020, 2037, 'Medicine'); executed in strict mode 


MAPTY APP OOP, 


GEOLOCATION, 
EXTERNAL LIBRARIES, 
AND MORE! 
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HOW TU PLAN A WEB PROJECT 


PROJECT PLANNING 


Description of the application's 

functionality from the user's 

perspective. All user stories put 

together describe the entire application. WHAT we will build HOW we will build it 


( 


1. 2. 3. 4. 
USER STORIES FEATURES FLOWCHART ARCHITECTURE 


PLANNING STEP 


Implementation of 
our plan using code 


1. USER STORIES 


& 


User story: Description of the application's functionality from the user's perspective. 


& 


Common format: As a [type of user], | want [an action] so that [a benefit] 


= Who? a= What? = Why? 


Example: user, admin, etc. 


As a user, | want to log my running workouts with location, distance, time, pace and 
steps/minute, so | can keep a log of all my running 


As a user, | want to log my cycling workouts with location, distance, time, speed and 
elevation gain, so | can keep a log of all my cycling 


As a user, | want to see all my workouts at a glance, so I can easily track my progress 
over time 


As a user, | want to also see my workouts on a map, so I can easily check where | 
work out the most 


As a user, | want to see all my workouts when I leave the app and come back later, so 
that I can keep using there app over time 


2. FEATURES 


Log my running workouts with location, 
distance, time, pace and steps/minute 


Log my cycling workouts with location, 


See all my workouts when I leave the 
app and come back later 


USER STORIES > FEATURES 


distance, time, speed and elevation gain I 


See all my workouts at a glance —_ 


See my workouts on a map. —— 5 


—— > 


Map where user clicks to add new workout (best way to 
get location coordinates) 


Geolocation to display map at current location (more user 
friendly) 

Form to input distance, time, pace, steps/minute 

Form to input distance, time, speed, elevation gain 
Display all workouts in a list 

Display all workouts on the map 

Store workout data in the browser using local storage API 


On page load, read the saved data from local storage and 
display 


3. FLOWCHART 


FEATURES 


1. Geolocation to display 
map at current location Cat rent 


Page loads location 
2. Map where user clicks to coordinates 


add new workout 
Load workouts | 


from local storage | 
q 


Bind 
handler 


User clicks on Render workout 
map form 


Render map on 
current location 


After map loaded 
3. Form to input distance, 
time, pace, steps/minute 


Render workout 
on map 


Bind handler 


4. Form to input distance, 
time, speed, elevation gain 


User submits 
new workout 


Render workout 

> A in list 
Bind 

handler 


Move map to User clicks on 
workout location workout in list 


5. Display workouts in a list 


6. Display workouts on the 
map 


Store workouts in | 
local storage 


7. Store workout data in the 
browser 


Many 


8. On page load, read the 


saved data and displa 
ac & In the real-world, you don't have to come with the final flowchart right in the 


9. Move map to workout planning phase. It's normal that it changes throughout implementation! 
location on click W____ Added later 


4. ARCHITECTURE 


FOR NOW, LET'S JUST 
START CODING & 
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FINAL CONSIDERATIONS 


10 ADDITIONAL FEATURE IDEAS: CHALLENGES & 


= Ability to edit a workout; 

= Ability to delete a workout; 

& Ability to delete all workouts; 

= Ability to sort workouts by a certain field (e.g. distance); 

<- Re-build Running and Cycling objects coming from Local Storage; 
< More realistic error and confirmation messages; 


= Ability to position the map to show all workouts [very hard]; 


= Ability to draw lines and shapes instead of just points [very hard]; 


+ Geocode location from coordinates (“Run in Faro, Portugal”) [only after 
asynchronous JavaScript section]; 


< Display weather data for workout time and place [only after asynchronous 
JavaScript section]. 


ASYNCHRONOUS 
JAVASCRIPT: 
PROMISES, ASYNC/ 
AWAIT AND AJAX 
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LECTURE 


ASYNCHRONOUS JAVASCRIPT, AJAX 
ANU APIS 


SYNCHRONOUS CODE 


| document 
p.textContent 
BLOCKING 


ENENENEN 


p.style.color 127.0.0.1:8080 says 


& Most code Is synchronous; 


& Synchronous code is executed line by line; 
SYNCHRONOUS 
& Each line of code waits for previous line to finish; 


SE Long-running operations block code execution. 


THREAD OF 
EXECUTION 


Z Part of execution 
context that actually 


executes the code in 
computers CPU 


ASYNCHRONOUS CODE 


p = document.querySelector('.p') THREAD OF PAREADO 
setTimeout( O 4 EXECUTION 
p.textContent = 'My name is Jonas!" 
|, 5000): Timer 
p.style.color = 'red'; running 


Example: Timer with callback 


[1, 2, 3].map(v > v x 2) 


(More on this in the 
lecture on Event Loop) 


Asynchronous code Is executed after a task that runs in the "background" finishes; 


“E Asynchronous code is non-blocking; 
ASYNCHRONOUS 
Execution doesn't wait for an asynchronous task to finish Its work; 


Callback functions alone do NOT make code asynchronous! 


ASYNCHRONOUS CODE 


img = document.querySelector('.dog'); THREAD OF 


img.src = ‘dog. jpg'; EXECUTION AAR 
img.addEventListener('load O 4 
img.classlist.add('fadeln' 
| Image 
| loading 
style.width = '300px u 
Example: Asynchronous image loading with event and callback 
Other examples: Geolocation API or AJAX calls (More on this in the 


lecture on Event Loop) 


Asynchronous code is executed after a task that runs in the “background” finishes; 


“E Asynchronous code is non-blocking; 
ASYNCHRONOUS 
Execution doesn't wait for an asynchronous task to finish Its work; 


Callback functions alone do NOT make code asynchronous! 


WHAT ARE AJAX CALLS? 


Asynchronous JavaScript And XML: Allows us to communicate with 
remote web servers in an asynchronous way. With AJAX calls, we can 


request data from web servers dynamically. 


Usually a 


_ web API 


Va Asking for some data += 


REQUEST (GET / POST / etc.) WEB 


SERVER 


RESPONSE 


u Sending data back += 


WHAT IS AN API? 


"publisher": "101 Cookbooks", 
"title": "Best Pizza Dough Ever", 
"source_url": "http://www. 181cookbo 
"recipe_id": "47746", 

"image_url": "http://forkify-api.he 


= Application Programming Interface: Piece of software 


that can be used by another piece of software, in order to 


allow applications to talk to each other; 
JSON data 


format format 


There are be many types of APIs in web development: 


x Most popular 
DOM API Geolocation API Own Class API “Online” API API data format 


x Just “API” 


< “Online” API: Application running on a server, that receives VENNE GET 
requests for data, and sends data back as response; Data about countries x O 
There is an AP! for Flights data 2 


& We can build our own web APIs (requires back-end Zn - Currency conversion data 
development, e.g. with node.js) or use 3rd-party APIs. APIs for sending email or SMS 
Google Maps 


4,4 4 4 4 4 4 


Millions of possibilities... 
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HOW THE Web WORKS: REQUESTS 
AND RESPUNSES 


WHAT HAPPENS WHEN WE ACCESS A WEB SERVER 


< Request-response model or Client-server architecture 


REQUEST WEB 
SERVER 
fun 


RESPONSE 


WHAT HAPPENS WHEN WE ACCESS A WEB SERVER 


GET /rest/v2/alpha/PT HTTP/1.1 | => Start line: HTTP method + request target + HTTP version 


Host: www.google.com 


User-Agent: Mozilla/5.0 =—> HTTP request headers (many different possibilities) 
Accept-Language: en-US 


https://104.27.142.889:443 


> Request body (only when sending data to server, e.g. POST) 


HTTP REQUEST EN 
WEB 
% TCP/IP socket connection SERVER 


AAN 
LLL 
LZ 


NJ) 
https:/restcountries.eu/rest/v2/alpha/ HTTP RESPONSE 4) 


HTTP/1.1 200 OK —> Start line: HTTP version + status code + status message 


DNS LOOKUP 


Protocol Domain name Resource Date: Fri, 18 Jan 2021 


(HTTP or HTTPS) Content-Type: text/html —> HTTP response headers (many different possibilities) 


Transfer-Encoding: chunked 


= Response body (most responses) 
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WHAT ARE PROMISES? 


< Promise: An object that is used as a placeholder for the future 


result of an asynchronous operation. 
I Less formal 


Promise: A container for an asynchronously delivered value. 


Less formal 


Promise: A container for a future value. 
Example: Response 


from AJAX call 


We no longer need to rely on events and callbacks passed into 
asynchronous functions to handle asynchronous results; 


Instead of nesting callbacks, we can chain promises for a 
sequence of asynchronous operations: escaping callback hell ¡$ 


Promise that | will 
receive money if | guess 
correct outcome 


3 | buy lottery ticket (promise) 
right now 


y 


© Lottery draw happens 
asynchronously 


y 


6 If correct outcome, | receive 
money, because It was promised 


The PROMISE LIFECYCLE 


Before the future Asynchronous task 


| - E.g. Fetch API returns promise 
( value is available ( has finished Ç 


SETTLED 
PROMISE 


| FULFLLED | REJECTED CONSUME 
Success! The value JJ 8) An error J A 


is now available happened 


ASYNC TASK 


— 


© 


BUILD 


PROMISE 


When we already have a 
promise. E.g. promise 
X We are able handle these different states in our code! returned from Fetch API 
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ASYNCHRONOUS BEHIND THE SCENES: 
IHE EVENT LOUP 


REVIEW: JAVASCRIPT RUNTIME 


= Concurrency model: How JavaScript handles “Container” which includes all the pieces 


multiple tasks happening at the same time. necessary to execute JavaScript code 


IT 


JS RUNTIME IN THE BROWSER © & 


mar ATT” ‘Js ENGINE WEB APIs 4 Apis provided 


the runtime to the engine 
z ma i from queue to 
EVENT LOOP call stack 
( ) callback functions 


HEAP CALL STACK 


Where object are Where code Is Only ONE thread of 
stored in memory actually executed execution. No multitasking! 


HOW ASYNCHRONOUS JAVASCRIPT WORKS BEHIND THE SCENES 


el = document.querySelector('img'); 

el.src = 'dog.jpg'; 

el.addEventListener('load', 0 > 1 
el.classList.add('fadeln'); 

Io 


WEB APIs © Io 


(=> 


el.classList.add('fadeln'); 
} 
Loading image 


E ee 
ee 


log() 


fetch(' https: //someurl.com/api') 
‚then(res > ‚Log(res)); 


Fetching data 


Execution context 


querySelector() 
z MICROTASKS 
QUEUE 
Global Execution 
context = 
=) How can asynchronous code be 
executed in a non-blocking way, 
Seine Another CALLBACK if there ıs only one thread of 
CALL STACK callback callback QUEUE y 


execution in the engine? 


MODERN JAVASCRIPT 

DEVELOPMENT: 

MODULES AND 
TOOLING 
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AN OVERVIEW Or MODERN 
JAVASCRIPT DEVELOPMENT 


MODERN JAVASCRIPT DEVELOPMENT 


Join all modules Convert modern 
into one file JavaScript back to ES5 
AA? 12) A, 
MODULE PAL BEL 
TRANSPILING/ JAVASCRIPT 
MODULE o BUNDLING — > POLYFILLING — BUNDLE 
3RD-PARTY 
PACKAGE 
BUILD PROCESS PRODUCTION 
DEVELOPMENT u webpack or ¿y PARCEL 


3rd party modules Development tools 
& Contains open-source packages to include 3rd-party 


NODE PACKAGE npm nu g e code in our own code (e.g React, jQuery, Leaflet, etc.) 
Gs)" 


MANAGER < Contains development tools that help build our 


a applications (e.g. live-server, Parcel, Babel, etc.) 
Both repository and software 
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AN OVERVIEW OF MODULES IN 
JAVASCRIP | 


AN OVERVIEW OF MODULES 


< Compose software: Modules are small building blocks 
that we put together to build complex applications; 


MODULE 


< Isolate components: Modules can be developed in 


WHY isolation without thinking about the entire codebase; 


& Reusable piece of code that 
P MODULES? 


encapsulates implementation details; & Abstract code: Implement low-level code in modules and 


i , import these abstractions into other modules; 
< Usually a standalone file, but it doesn't P 


have to be. & Organized code: Modules naturally lead to a more 
organized codebase; 


& Reuse code: Modules allow us to easily reuse the same 
code, even across multiple projects. 


IMPORT 
(DEPENDENCY) 


Module code 
Scores diceP1, diceP2 
scores EXPORT 


(PUBLIC API) 


NATIVE JAVASCRIPT (E56) MODULES 


ESO MODULE SCRIPT 


ESO NODULES 


< Top-level variables Scoped to module Global 
Modules stored in files, exactly 
one module per file. < Default mode Strict mode Sloppy” mode 
< Top-level this undefined window 
ERE < Imports and expor YES © NO 
ARE ML linking <script type="module"> <script> 
diceP1, diceP2 
scores 
< File downloading Asynchronous Synchronous 


import and export & Need to happen at top-level 


syntax Imports are hoisted! 


HOW E56 MODULES ARE IMPOR TED 


| - Live connection, 
di rand å) . [math.js 


: | - NOT copies 
4 showDice | > . | dom.js P 
dice rand(1, 6, 2 : å $ 
Darf BĘ, 5, 3 Parsing index.js 
showDice(dice) 
+ ildex.js + + showDice () 
Asynchronous Asynchronous (| showDice |) 
Live connection, , KACA downloading math.js downloading dom. js < dom.js 
NOT copies X math.js 


Y v 


IMPORTING MODULES 


BEFORE EXECUTION mk lisia to asi. imports to 
math. js exports dom. js exports 
& Modules are imported synchronously M M 
& Possible thanks to top-level (“static”) imports, Execution math. js Execution dom. js 
which make imports known before execution 4 4 


& This makes bundling and dead code 
elimination possible Execution index.js 
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REVIEW: WRITING CLEAN AND 
MODERN JAVASCHIP I 


REVIEW: MODERN AND CLEAN CODE 


READABLE CODE 


“ Write code so that others can understand it 
Write code so that you can understand it in 1 year 
Avoid too “clever” and overcomplicated solutions 


Use descriptive variable names: what they contain 


4 4 4 & 


Use descriptive function names: what they do 


GENERAL 


& Use DRY principle (refactor your code) 

& Dont pollute global namespace, encapsulate instead 
& Dont use var 
+ 


Use strong type checks (=== and !==) 


FUNCTIONS 


< Generally, functions should do only one thing 
Don't use more than 3 function parameters 
Use default parameters whenever possible 


Generally, return same data type as received 


4 4 4 4 


Use arrow functions when they make code more readable 


OOP 


Use ES6 classes 


£- 
< Encapsulate data and don't mutate it from outside the class 
& Implement method chaining 

+ 


Do not use arrow functions as methods (in regular objects) 


REVIEW: MODERN AND CLEAN CODE 


AVOID NESTED CODE 


& Use early return (guard clauses) 
Use ternary (conditional) or logical operators instead of if 
Use multiple if instead of if/else-if 


Avoid for loops, use array methods instead 


4 4 4 4 


Avoid callback-based asynchronous APIs 


ASYNCHRONOUS CODE 
< Consume promises with async/await for best readability 
< Whenever possible, run promises in parallel (Promise. all) 


< Handle errors and promise rejections 
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DECLARATIVE AND FUNCTIONAL 
JAVASCRIPT PRINCIPLES 


IMPERATIVE VS. DECLARATIVE CODE 


Two fundamentally different ways 


—T of writing code (paradigms) 
DECLARATIVE 


IMPERATIVE 


& Programmer explains “HOW to do things” < Programmer tells “WHAT do do” 

< We explain the computer every single step it has to < We simply describe the way the computer should achieve 
follow to achieve a result the result 

< Example: Step-by-step recipe of a cake < The HOW (step-by-step instructions) gets abstracted away 


< Example: Description of a cake 


arr 2 


doubled arr 


1 0: 1 doubled arr 


doubled!i arrli 2 


FUNCTIONAL PROGRAMMING PRINCIPLES 


FUNCTIONAL PROGRAMMING 


Declarative programming paradigm 


Based on the Idea of writing software by combining many 
pure functions, avoiding side effects and mutating data 


Side effect: Modification (mutation) of any data outside 
of the function (mutating external variables, logging to 
console, writing to DOM, etc.) 


Pure function: Function without side effects. Does not 
depend on external variables. Given the same inputs, 
always returns the same outputs. 


Immutability: State (data) is never modified! Instead, 
state is copied and the copy is mutated and returned. 


Examples: Keb React > Redux 


FUNCTIONAL PROGRAMMING TECHNIQUES 


Try to avoid data mutations 
Use built-in methods that don't produce side effects 


Do data transformations with methods such 
as .map(), .filter() and .reduce() 


Try to avoid side effects in functions: this is of course not 
always possible! 


DECLARATIVE SYNTAX 


Use array and object destructuring 
Use the spread operator (.. .) 
Use the ternary (conditional) operator 


Use template literals 


FORKIFY APP. 
BUILDING A MODERN 
APPLICATION 
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PROJECT PLANNING 


X LATER 


USER EE sz > = sd SE > een 


PLANNING STEP 


1. USER STORIES 


& User story: Description of the applications functionality from the user's perspective. 


< Common format: As a [type of user], | want [an action] so that [a benefit] 


As a user, | want to search for recipes, so that I can find new ideas for meals 


As a user, | want to be able to update the number of servings, so that I can cook a 
meal for different number of people 


As a user, | want to bookmark recipes, so that | can review them later 


As a user, | want to be able to create my own recipes, so that | have them all 
organized in the same app 


As a user, | want to be able to see my bookmarks and own recipes when I leave the 
app and come back later, so that | can close the app safely after cooking 


2. FEATURES 


Search for recipes ===> 


Update the number of servings i 
Bookmark recipes Mana PE 


Create my own recipes 5 


See my bookmarks and own recipes 


when I leave the app and come back later IE 


USER STORIES —— FEATURES 


a 


Q 


Search functionality: input field to send request to API with searched 
keywords 


Display results with pagination 


Display recipe with cooking time, servings and ingredients 


Change servings functionality: update all ingredients according to 
current number of servings 


Bookmarking functionality: display list of all bookmarked recipes 


User can upload own recipes 
User recipes will automatically be bookmarked 


User can only see their own recipes, not recipes from other users 


Store bookmark data in the browser using local storage 


On page load, read saved bookmarks from local storage and display 


3. FLOWCHART (PART 1) 


FEATURES 


1. Search functionality: API 
search request 


2. Results with pagination 


3. Display recipe 


& Mark selected result 
ASYNC ASYNC 


User searches at OEG Render search | === User selects Load recipe Render recipe 
results results | Bind recipe 
handler 


Other features later User clicks — Lg pagination Page loads 
pagination  -_-_______________ buttons with recipe ID 
Bind handler 
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WHY WORRY ABOUT ARCHITECTURE? 


< Like a house, software The perfect architecture 
needs a structure: the way 
we organize our code 
& We can create our own 
architecture (Mapty project) 
STRUCTURE 
& We can use a well-established 
architecture pattern like MVC, 
MVP Flux, etc. (this project) 


& We can use a framework like 
React, Angular, Vue, Svelte, etc. 


MAINTAINABILITY EXPANDABILITY GP A] y S, 


< A project is never done! 
We need to be able to easily 
change it in the future 


< We also need to be able to 
easily add new features 


COMPONENTS Or ANY ARCHITECTURE 


APPLICATION LOGIC PRESENTATION LOGIC 


BUSINESS LOGIC STATE HTTP LIBRARY 


A 


Code that solves 
the actual business 
problem; 


Directly related to 
what business does 
and what it needs; 


Example: sending 
messages, storing 
transactions, 
calculating taxes, ... 


Essentially stores 
all the data about 
the application 


Should be the 
“single source of 
truth” 


Ul should be kept in 
sync with the state 


State libraries exist 


O M 


Responsible for 
making and 
recelving AJAX 
requests 


Optional but almost 
always necessary In 
real-world apps 


(ROUTER) 


Code that is only 
concerned about 
the implementation 
of application itself; 


Handles navigation 
and Ul events 


Keeping in sync 


(UI LAYER) 


< Code that Is 
concerned about 
the visible part of 
the application 


< Essentially displays 
application state 


The MODEL-VIEW-CONTROLLER (MVC) ARCHITECTURE 


BUSINESS LOGIC APPLICATION LOGIC PRESENTATION LOGIC 


STATE < Bridge between model 
and views (which don't 


know about one another) 
HTTP LIBRARY 
= Handles Ul events and 
dispatches tasks to =—— Connected by function call and import 


model and view  sususs » Data flow 


MODEL, VIEW AND CONTROLLER IN FORKIFY (RECIPE DISPLAY ONLY) IT forkify 


e A © > = > m 
ASYNC 


recipe 
Page loads 
with recipe ID 


MVC IMPLEMENTATION (RECIPE DISPLAY ONLY) IT forkify 


Module] model. js controtter.js | Fetiseds | [Eassjnecipevien 


controller) 


Ji | E 
recipe pe Å 3 


Program User clicks 
starts search result 


data 


_generateMarkup() 
: | renderSpinner () 
AA > addHandlerRender () 


export loadRecipe() 
— | 


passing 
controlRecipe() 
function as handler 


— Function call 
cm...» » Data flow 
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EVENT HANDLERS IN MVC: 
PUBLISHER-SUBSLRIBER FAT TERN 


EVENT HANDLING IN MVC: PUBLISHER=SUBOCRIBER PATTERN IT forkify 


Code that wants to 


z i i Code that knows when 
react: SUBSCRIBER Module controller.js Class RecipeView to react: PUBLISHER 


© Class Recipevieu  _ 
j User clicks % 
search result 


A() —> B NG Subscribe to publisher by passing in 
Program ® the subscriber function 
starts 


— Function call 
mm... » Data flow 


a B 
= 50 A < controlRecipes will be passed into addHandlerRender when program starts 
pa” | 
A(X) x “ addHandlerRender listens for events (addEventListener), and uses 


controlRecipes as callback 


< Events should be handled in the controller (otherwise we would have application logic in the view) 


& Events should be listened for in the view (otherwise we would need DOM elements in the controller) 
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WRAPPING UP: FINAL 
CONSIDERATIONS 


IMPROVEMENT AND FEATURE IDEAS: CHALLENGES 


< Display number of pages between the pagination buttons; 
= Ability to sort search results by duration or number of ingredients; 
& Perform ingredient validation in view, before submitting the form; 


= Improve recipe ingredient input: separate in multiple fields and allow more 
than 6 ingredients; 


= Shopping list feature: button on recipe to add Ingredients to a list; 


< Weekly meal planning feature: assign recipes to the next 7 days and show 
on a weekly calendar; 


< Get nutrition data on each ingredient from spoonacular API (https:// 
spoonacular.com/food-api) and calculate total calories of recipe. 


